/* ===== App Download CTA ===== */
.app-cta-card{
  position: relative;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 90% 0%, rgba(14,165,233,.18), transparent 55%),
              radial-gradient(900px 500px at 10% 100%, rgba(16,185,129,.16), transparent 60%),
              #fff;
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
  padding: 22px;
  direction: rtl;
}

.app-cta-grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: center;
}

@media (max-width: 992px){
  .app-cta-grid{ grid-template-columns: 1fr; }
}

.app-cta-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(14,165,233,.10);
  color: #0369a1;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(14,165,233,.20);
}

.app-cta-title{
  margin: 12px 0 6px;
  font-weight: 900;
  font-size: 28px;
  color: #0f172a;
}

.app-cta-sub{
  margin: 0 0 12px;
  color: #475569;
  font-size: 15px;
  line-height: 1.8;
}

.app-cta-note{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(2,6,23,.04);
  border: 1px dashed rgba(15,23,42,.18);
  color: #0f172a;
  font-weight: 700;
  margin-bottom: 14px;
}

.app-cta-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.store-btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  transition: .18s ease;
  min-width: 190px;
}

.store-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(2,6,23,.10);
}

.store-ic{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.store-txt small{
  display: block;
  color: #64748b;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 2px;
}

.store-txt strong{
  display: block;
  color: #0f172a;
  font-weight: 900;
  font-size: 15px;
}

/* variants */
.store-btn-play .store-ic{
  background: rgba(16,185,129,.14);
  color: #047857;
  border: 1px solid rgba(16,185,129,.22);
}

.store-btn-apple .store-ic{
  background: rgba(2,6,23,.10);
  color: #0f172a;
  border: 1px solid rgba(2,6,23,.16);
}

.app-cta-small{
  margin-top: 12px;
  color: #64748b;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Visual (simple phone mock) */
.app-cta-visual{
  display: grid;
  gap: 12px;
  justify-items: center;
}

.phone-mock{
  width: 270px;
  height: 360px;
  border-radius: 28px;
  background: #0b1220;
  padding: 12px;
  box-shadow: 0 18px 34px rgba(2,6,23,.22);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
}

.phone-notch{
  text-align:center;
  width: 120px;
  height: 25px;
  border-radius: 0 0 14px 14px;
  background: #ECF0F7;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom:15px;
}

.phone-screen{
  height: 100%;
  border-radius: 22px;
  background: radial-gradient(700px 400px at 60% 0%, rgba(14,165,233,.30), transparent 60%),
              radial-gradient(700px 400px at 20% 100%, rgba(16,185,129,.28), transparent 60%),
              #0f172a;
  padding: 18px 14px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.screen-line{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}

.screen-line.w-60{ width: 60%; }
.screen-line.w-70{ width: 70%; }
.screen-line.w-85{ width: 85%; }

.screen-cards{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.screen-card{
  height: 62px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}

/* Optional QR box */
.qr-box{
  width: 100%;
  max-width: 270px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 12px 22px rgba(2,6,23,.08);
}

.qr-title{
  font-weight: 900;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.qr-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.qr-item{
  text-align: center;
  font-weight: 800;
  color: #334155;
  font-size: 12px;
}

.qr-item img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #f8fafc;
  padding: 8px;
}